<template>
  <div class="app-container">
    <div class="title" v-if="showBtn && win_id > 0">{{ '恭喜中奖!!!' }}</div>
    <div class="x" v-if="participantsList.length > 0">
      <vue-seamless-scroll v-show="!visible" :data="participantsList" class="seamless-warp" :class-option="classOption()">
        <ul class="mobile">
          <li class="mobile-item" v-for="(item, index) in participantsList" :key="index">{{ item.mobile }}</li>
        </ul>
      </vue-seamless-scroll>
      <ul class="mobile">
        <li class="mobile-item" v-show="visible">{{ win }}</li>
      </ul>
      <div class="btn">
        <el-button @click="buttonOnClick()" type="danger" v-if="showBtn">开始抽奖</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/api'
import vueSeamlessScroll from 'vue-seamless-scroll'
// const list = [
//   { userID: 1, userName: 'hhh' },
//   { userID: 2, userName: 'ctl' },
//   { userID: 3, userName: 'xwh' },
//   { userID: 4, userName: 'whb' },
//   { userID: 5, userName: 'hjy' }
// ]

export default {
  name: 'Yaohao',
  components: { vueSeamlessScroll },
  watch: {
    win_id: {
      deep: true,
      handler(v1, v2) {
        console.log(v1, v2)
        if (v1 !== v2) {
          this.showBtn = true
        }
      }
    }
  },
  data() {
    return {
      animateUp: false,
      userInfo: {
        id: undefined,
        mobile: undefined
      },
      participantsList: [],
      // list: [],
      win: '',
      visible: false,
      step: 0.3,
      win_id: 0,
      showBtn: true
    }
  },
  created() {
    this.fetch()
  },
  methods: {
    fetch() {
      api.news.getLotteryList().then(response => {
        const { data } = response
        console.log(data)
        this.participantsList = data.list
      })
    },
    classOption() {
      return {
        step: this.step, // 数值越大速度滚动越快
        limitMoveNum: this.participantsList.length, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: false, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    },
    buttonOnClick() {
      // if (this.participantsList.length === 0) {
      //   alert('所有人都中奖了!,请重新分配奖品')
      //   return
      // }
      // 实际使用随机数不是滚动停止
      this.showBtn = false
      this.visible = false
      this.step = 4
      this.makeChoice().then(() => this.setInfotoo())
      setTimeout(this.xianshi, 3000)
    },
    xianshi() {
      this.step = 0
      this.visible = true
    },
    async makeChoice() {
      await this.randomNumber()
    },

    generateRandomNum() {
      const arrayBounds = this.participantsList.length
      const randomNum = Math.floor(Math.random() * arrayBounds)
      this.userInfo.mobile = this.participantsList[randomNum].mobile
      this.userInfo.id = this.participantsList[randomNum].id
    },

    randomNumber() {
      return new Promise((resolve, reject) => {
        const randomChoice = setInterval(this.generateRandomNum, 50)
        setTimeout(function () {
          clearInterval(randomChoice)
        }, 1000)
        this.participantsList.length === 0
          ? this.$message.error('未选择人员')
          : setTimeout(function () {
            resolve()
          }, 3000)
      })
    },
    // 抽中后不排除中奖人
    setInfotoo() {
      this.win = Object.assign({}, this.userInfo).mobile
      console.log(this.userInfo)
      this.win_id = this.userInfo.id
      this.save()
    },
    // 抽中后排除中奖人
    // setInfo () {
    //   const object = Object.assign({}, this.userInfo)
    //   const nowList = this.participantsList
    //   for (let i = 0; i < nowList.length; i++) {
    //     if (object.userID === nowList[i].userID) {
    //       nowList.splice(i, 1)
    //     }
    //   }
    //   this.list.push(object)
    //   console.log(object)
    //   console.log(this.list)
    // },
    save() {
      api.news.lotteryWin({ id: this.win_id }).then(() => {
        this.$notify({
          title: '成功',
          message: '已保存中奖人,请在中奖结果中查看!',
          type: 'success',
          duration: 2000
        })
      })
    }
  }
}
</script>
<style lang="scss">
.app-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.x {
  padding: 30px;
  //background: black;
  width: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.seamless-warp {
  width: 400px;
  //height: 21px;
  height: 100px;
  overflow: hidden;
}
.btn {
  width: 120px;
}
.mobile {
  margin: 0;
  padding: 0;
  height: 300px;
  .mobile-item {
    list-style: none;
    height: 50px;
    font-size: 50px;
    color: red;
  }
}
.title {
  font-size: 60px;
  color: red;
  margin-bottom: 20px;
}
</style>

